<script setup lang='ts'>
 import ChannelNav from '@/components/ChannelNav.vue';
import ArticleList from '@/components/ArticleList.vue'
import { onMounted, ref } from 'vue';
import { getChannelAPI } from '@/api/channel';
import type { ChannelItem } from '@/types';


// 初始加载, 钩子函数
onMounted(() => {
    // 获取频道数据
    getChannel()
})

// 定义接收的参数
const channelList = ref<ChannelItem[]>([])

// 顶部tabbar数据请求
const getChannel = async () => {
    const result = await getChannelAPI()
    channelList.value = result.channels // 赋值列表
    activeId.value = result.channels[0].id // 把第一个频道的id作为激活的选项(默认激活)
}

// 导航切换
// 当前激活的id
const activeId = ref(0)

// 字穿父的id
const updateActiveId = (id: number) => {
    activeId.value = id
}


</script>
       
<template>
        <!-- 父子传值  -->
         <ChannelNav :active-id="activeId"   @update-active-id="updateActiveId" :channels="channelList"></ChannelNav>
         <ArticleList></ArticleList>
</template>
       
<style scoped>
       
</style>